<template>
    <div class="outer">
        <van-nav-bar title="购物车" />
        <div class="inner">
            <van-button color="rgb(189, 80, 80)" plain style="width: 150px; margin: 10px;"
                @click="allDel">清空购物车</van-button>
            <van-swipe-cell v-for="item in carts" :key="item.cartid">
                <van-checkbox v-model="item.flag" @change="singleChange(item)" shape="square"></van-checkbox>
                <van-card :num="item.num" :price="item.originprice" :title="item.proname" class="goods-card"
                    :thumb="item.img1" />
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="del(item)" />
                </template>
                <div class="footer">
                    <van-row gutter="20">
                        <van-col span="10">
                            <van-stepper v-model="item.num" integer min="1" @change="numChange(item)" />
                        </van-col>
                        <van-col span="10" style="padding-top: 4px; padding-left: 20px;">小计：{{ item.num *
                            item.originprice }}元</van-col>
                    </van-row>
                </div>
            </van-swipe-cell>
            <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="checked" @click="allChange">全选</van-checkbox>
            </van-submit-bar>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ref, onMounted, computed } from 'vue'
import { cartList, cartsingleFlag, cartFlags, cartNum, cartsingleDel, cartDel } from '@/api/cart'
import { useUserStore } from '@/stores/userStore'
import { useCartStore } from '@/stores/cartStore'
import { orderAdd } from '@/api/order'
import { useOrderStore } from '@/stores/orderStore'
let router = useRouter();
let userStore = useUserStore();
let cartStore = useCartStore();
let orderStore = useOrderStore();

onMounted(() => {
    list();
});

let carts = ref([]);
let checked = ref(false);
let list = function () {
    cartList(userStore.userid).then(res => {
        carts.value = res.data.data;
        console.log(res);
        if (res.data.data) {
            let sum = carts.value.map(v => v.num).reduce((sum, v) => sum + v, 0);
            cartStore.cartNum = sum;
            cartStore.cartArr = carts.value;
        } else {
            cartStore.cartNum = 0;
        }
    });
    checked.value = carts.value.every(v => v.flag == true);
}
let singleChange = function (item) {
    let obj = { cartid: item.cartid, flag: item.flag }
    cartsingleFlag(obj).then(res => {
        list();
    });
}
let allChange = function () {
    let obj = { userid: userStore.userid, type: checked.value }
    cartFlags(obj).then(res => {
        list();
    });
}
let numChange = function (item) {
    let obj = { cartid: item.cartid, num: item.num }
    cartNum(obj).then(res => {
        list();
    }
    );
}
let del = function (item) {
    cartsingleDel(item.cartid).then(res => {
        list();
    });
}
let allDel = function () {
    cartDel({ userid: userStore.userid }).then(res => {
        list();
    });
}
let total = computed(() => {
    if (carts.value) {
        let sum = carts.value.filter(v => v.flag == true).reduce((sum, v) => sum + v.num * v.originprice, 0);
        return sum * 100;
    } else {
        return 0;
    }
});
let onSubmit = function () {
    orderAdd(userStore.userid).then(res => {
        console.log(res);
        orderStore.time = res.data.time;
        router.push("/order");
    });
}
</script>
<style lang="scss" scoped>
.outer {
    height: 100%;
    display: flex;
    flex-direction: column;

    .inner {
        flex: 1;
        padding: 5px;
        overflow: auto;

        .delete-button {
            height: 100%;
        }

        .footer {
            border-top: 1px solid rgb(215, 215, 215);
            padding: 10px;
            background-color: rgb(255, 248, 248);
        }
    }
}

.van-submit-bar {
    position: static;
}

// 样式穿透
// :deep .van-card__header {
//     // margin-left: 50px;
// }

.van-swipe-cell {
    position: relative;
    border: 1px solid rgb(215, 215, 215);
    margin: 10px;

    .ck {
        position: absolute;
        left: 30px;
        top: 20px;
    }
}
</style>